<template>
  <div :style="styleObject">
    <div :id="id" ref="editor" :style="styleObject"></div>
  </div>
</template>

<script>
import Wangeditor from "wangeditor";
import _ from "lodash";

export default {
  name: "editor",
  props: [
    "id",
    "value",
    "width",
    "height",
    "uploadImgServer",
    "disabled",
    "menus",
    "mapKey",
    "menuFixed",
    "pasteFilter",
    "codeDefaultLang",
    "hideLinkImg",
    "uploadImgParams",
    "uploadImgHeaders",
    "isRealtime",
    "disabledMenus",
    "uploadFileName",
    "uploadImgShowBase64"
  ],
  data() {
    return {
      styleObject: {
        width: "auto",
        height: "auto"
      },
      editor: null
    };
  },
  methods: {
    // 设置尺寸
    initSize() {
      if (this.width) {
        this.styleObject.width = this.width + "px";
      }
      if (this.height) {
        this.styleObject.height = this.height + "px";
      }
    },
    // 创建编辑器
    createEditor() {
      this.editor = new Wangeditor(document.getElementById(this.id));
      this.initConfig();
      // console.log(this.editor);
      this.editor.create();
    },
    initConfig() {
      this.editor.customConfig.uploadFileName = this.uploadFileName
        ? this.uploadFileName
        : "image[]";
      this.editor.customConfig.uploadImgServer = this.uploadImgServer;
      this.editor.customConfig.uploadImgShowBase64 = this.uploadImgShowBase64
        ? this.uploadImgShowBase64
        : false;
      // this.editor.customConfig.uploadImgFns.onload = (resultText, xhr) => {
      //     let originalName = this.editor.uploadImgOriginalName || '';
      //     this.$emit('load', originalName, resultText)
      // };
      // this.editor.customConfig.uploadImgFns.ontimeout = (xhr) => {
      //     this.$emit('timeout')
      // };
      // this.editor.customConfig.uploadImgFns.onerror = (xhr) => {
      //     this.$emit('error')
      // };
      this.editor.customConfig.uploadImgFileName = "file";
      this.editor.customConfig.pasteFilter = false;
      if (this.mapKey != undefined) {
        // 配置地图key，默认空
        this.editor.customConfig.mapAk = this.mapKey;
      }
      if (
        this.menus != undefined &&
        this.menus instanceof Array &&
        this.menus.length
      ) {
        // 配置菜单，默认全部，对source进行过滤
        this.editor.customConfig.menus = this.filterMenu(this.menus);
      } else if (this.disabledMenus) {
        // 禁用菜单
        this.editor.customConfig.menus = this.filterDisabledMenu(
          this.editor.customConfig.menus,
          this.disabledMenus
        );
      } else {
        // this.editor.customConfig.menus = this.filterMenu(wangEditor.config.menus)
      }
      if (this.menuFixed != undefined) {
        // 配置菜单栏吸顶，默认true
        this.editor.customConfig.menuFixed = this.menuFixed;
      }
      if (this.pasteFilter != undefined) {
        // 配置粘贴过滤，默认为false
        this.editor.customConfig.pasteFilter = this.pasteFilter;
      }
      if (this.codeDefaultLang != undefined) {
        // 默认代码类型，默认javascript
        this.editor.customConfig.codeDefaultLang = this.codeDefaultLang;
      }
      if (this.hideLinkImg != undefined) {
        // 隐藏添加网络图片功能，默认显示
        this.editor.customConfig.hideLinkImg = this.hideLinkImg;
      }
      if (
        this.uploadImgParams != undefined &&
        this.uploadImgParams instanceof Object
      ) {
        // 上传图片自定义参数
        this.editor.customConfig.uploadImgParams = this.uploadImgParams;
      }
      if (
        this.uploadImgHeaders != undefined &&
        this.uploadImgHeaders instanceof Object
      ) {
        // 上传图片自定义头部
        this.editor.customConfig.uploadImgHeaders = this.uploadImgHeaders;
      }
      if (this.value) {
        this.setHtml(this.value);
      }
      if (this.disabled) {
        this.disable();
      }
      this.listenChange();
    },
    // 筛选编辑器菜单
    filterMenu(menus) {
      return window.__.map(menus, (item, key) => {
        if (item === "source") {
          return null;
        }
        return item;
      });
    },
    // 筛选不可用菜单
    filterDisabledMenu(menus, disabledMenus) {
      let menusToString = menus.join(",");
      _(disabledMenus).forEach(res => {
        menusToString = menusToString.replace(res, "").replace(",,", ",");
      });
      if (menusToString.length && menusToString[0] == ",") {
        menusToString.substr(1, menusToString.length);
      }
      return menusToString.split(",");
    },
    insertImg(url) {
      this.editor.command(
        null,
        "insertHtml",
        "<img src=" + url + ' style="max-width:100%;"/>'
      );
    },
    // 获取内容(html)
    getHtml() {
      return this.editor.txt.html();
    },
    // 获取内容(纯文本)
    getText() {
      return this.editor.txt.text();
    },
    // 设置内容(html)
    setHtml(text) {
      this.editor.txt.html(text);
    },
    // 追加内容(html)
    appendHtml(text) {
      this.editor.txt.append(text);
    },
    // 清空内容
    clear() {
      this.editor.clear();
    },
    // 启用编辑器
    enable() {
      this.editor.enable();
    },
    // 禁用编辑器
    disable() {
      this.editor.disable();
    },
    // 销毁编辑器
    destroy() {
      this.editor.destroy();
    },
    // 恢复编辑器
    undestroy() {
      this.editor.undestroy();
    },
    // 监听内容改变
    listenChange() {
      this.editor.onchange = () => {
        this.$emit("change");
        let result = "";
        if (!this.getText()) {
          result = this.getHtml();
        }
        if (this.isRealtime !== false) {
          this.$emit("input", result);
        }
      };
    }
  },
  mounted() {
    this.initSize();
    setTimeout(() => {
      this.createEditor();
    }, 100);
  }
};
</script>
